<template>
  <a-modal title="数据上传" :width="600" :visible="visible" :confirmLoading="uploading" @cancel="handleClose">
    <a-upload-dragger
      name="file"
      :multiple="true"
      accept=".csv,.xls,.xlsx,.txt"
      :fileList="fileList"
      :remove="handleRemove"
      :beforeUpload="beforeUpload"
    >
      <p class="ant-upload-drag-icon">
        <a-icon type="inbox" />
      </p>
      <p class="ant-upload-text">将文件拖到此处，或点击上传</p>
      <p class="ant-upload-hint">
        支持 xlsx | xls | csv ，包含表示地理位置的两列，如X | Y，城市名
        |地址。支持GeoJSON以及压缩为Zip的Shapefile数据，需UTF-8编码。
      </p>
    </a-upload-dragger>

    <template slot="footer">
      <a-button @click="handleClose">关闭</a-button>
      <a-button type="primary" @click="handleImport" :disabled="fileList.length === 0" :loading="uploading">
        {{ uploading ? '上传中...' : '开始上传' }}
      </a-button>
    </template>
  </a-modal>
</template>

<script>
export default {
  name: 'JImportModal',
  props: {
    url: {
      type: String,
      default: '',
      required: false
    },
    biz: {
      type: String,
      default: '',
      required: false
    },
    value: {
      type: Array,
      default: () => [],
      required: false
    }
  },
  data() {
    return {
      visible: false,
      uploading: false,
      fileList: [],
      uploadAction: '',
      foreignKeys: '',
      validateStatus: 0
    }
  },
  // watch: {
  //   url (val) {
  //     if(val){
  //      this.uploadAction = window._CONFIG['domianURL']+val
  //     }
  //   }
  // },
  created() {
    // this.uploadAction = window._CONFIG['domianURL']+this.url
  },

  methods: {
    handleClose() {
      this.visible = false
    },
    show(arg) {
      this.fileList = []
      this.uploading = false
      this.visible = true
      this.foreignKeys = arg
      this.validateStatus = 0
    },
    handleRemove(file) {
      const index = this.fileList.indexOf(file)
      const newFileList = this.fileList.slice()
      newFileList.splice(index, 1)
      this.fileList = newFileList
    },
    beforeUpload(file) {
      if (this.fileList.length > 0) {
        this.handleRemove(this.fileList[0])
      }
      this.fileList = [...this.fileList, file]
      this.$emit('change', this.fileList)
      return false
    },
    handleImport() {
      const { fileList } = this
      const formData = new FormData()
      if (this.biz) {
        formData.append('isSingleTableImport', this.biz)
      }
      if (this.foreignKeys && this.foreignKeys.length > 0) {
        formData.append('foreignKeys', this.foreignKeys)
      }
      fileList.forEach((file) => {
        formData.append('files[]', file)
      })
      this.uploading = true
      // postAction(this.uploadAction, formData).then((res) => {
      this.uploading = false
      //   if(res.success){
      //     if(res.code == 201){
      //       this.errorTip(res.message, res.result)
      //     }else{
      //       this.$message.success(res.message)
      //     }
      const fileNames = this.fileList.map((item) => {
        return item.name
      })
      this.visible = false
      this.$emit('ok', fileNames[0])
      //   }else{
      //     this.$message.warning(res.message)
      //   }
      // })
    },
    // 是否开启校验 开关改变事件
    handleChangeValidateStatus(checked) {
      this.validateStatus = checked == true ? 1 : 0
    },
    // 错误信息提示
    errorTip(tipMessage, fileUrl) {
      const h = this.$createElement
      const href = window._CONFIG['domianURL'] + fileUrl
      this.$warning({
        title: '导入成功,但是有错误数据!',
        content: h('div', {}, [
          h('div', tipMessage),
          h('span', '具体详情请 '),
          h(
            'a',
            {
              attrs: {
                href: href,
                target: '_blank'
              }
            },
            '点击下载'
          )
        ]),
        onOk() {}
      })
    }
  },
  model: {
    prop: 'value',
    event: 'change'
  }
}
</script>

<style scoped></style>
